import React, { Component } from 'react'
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'

import Login from './pages/login/Login'
import Admin from './pages/admin/Admin'
import Home from './pages/home/Home'
import Product from './pages/product/Product'
import User from './pages/user/User'
import Role from './pages/role/Role'
import Bar from './pages/charts/Bar'
import Line from './pages/charts/Line'
import Pie from './pages/charts/Pie'
import Category from './pages/category/Category'
import Order from './pages/order/Order'
import ProductHome from './pages/product/ProductHome'
import ProductDetails from './pages/product/ProductDetails'
import ProductAddOrUpdate from './pages/product/ProductAddOrUpdate'
export default class App extends Component {
  render () {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="*" element={<Navigate to="/login" />} />
          <Route path="/login" element={<Login />} />
          <Route path="/*" element={<Admin />} >
            <Route path="home" element={<Home />} />
            <Route path="product/*" element={<Product />}>
              <Route path="home" element={<ProductHome />} />
              <Route path="addUpdate" element={<ProductAddOrUpdate />} />
              <Route path="detail" element={<ProductDetails />} />
              <Route path="*" element={<Navigate to="/product/home" />} />
            </Route>
            <Route path="user" element={<User />} />
            <Route path="role" element={<Role />} />
            <Route path="charts/bar" element={<Bar />} />
            <Route path="charts/line" element={<Line />} />
            <Route path="charts/pie" element={<Pie />} />
            <Route path="category" element={<Category />} />
            <Route path="order" element={<Order />} />
            <Route path="*" element={<Navigate to="/home" />} />
          </Route>
        </Routes>
      </BrowserRouter>
    )
  }
}